 @charset "utf-8";

 .border,

 .border-top,

 .border-right,

 .border-bottom,

 .border-left,

 .border-topbottom,

 .border-rightleft,

 .border-topleft,

 .border-rightbottom,

 .border-topright,

 .border-bottomleft {

     position: relative;

 }

 .border::before,

 .border-top::before,

 .border-right::before,

 .border-bottom::before,

 .border-left::before,

 .border-topbottom::before,

 .border-topbottom::after,

 .border-rightleft::before,

 .border-rightleft::after,

 .border-topleft::before,

 .border-topleft::after,

 .border-rightbottom::before,

 .border-rightbottom::after,

 .border-topright::before,

 .border-topright::after,

 .border-bottomleft::before,

 .border-bottomleft::after {

     content: "\0020";

     overflow: hidden;

     position: absolute;

 }

 /* border

  * 因，边框是由伪元素区域遮盖在父级

  * 故，子级若有交互，需要对子级设置

  * 定位 及 z轴

  */

 .border::before {

     box-sizing: border-box;

     top: 0;

     left: 0;

     height: 100%;

     width: 100%;

     border: 1px solid #eaeaea;

     transform-origin: 0 0;

 }

 .border-top::before,

 .border-bottom::before,

 .border-topbottom::before,

 .border-topbottom::after,

 .border-topleft::before,

 .border-rightbottom::after,

 .border-topright::before,

 .border-bottomleft::before {

     left: 0;

     width: 100%;

     height: 1px;

 }

 .border-right::before,

 .border-left::before,

 .border-rightleft::before,

 .border-rightleft::after,

 .border-topleft::after,

 .border-rightbottom::before,

 .border-topright::after,

 .border-bottomleft::after {

     top: 0;

     width: 1px;

     height: 100%;

 }

 .border-top::before,

 .border-topbottom::before,

 .border-topleft::before,

 .border-topright::before {

     border-top: 1px solid #eaeaea;

     transform-origin: 0 0;

 }

 .border-right::before,

 .border-rightbottom::before,

 .border-rightleft::before,

 .border-topright::after {

     border-right: 1px solid #eaeaea;

     transform-origin: 100% 0;

 }

 .border-bottom::before,

 .border-topbottom::after,

 .border-rightbottom::after,

 .border-bottomleft::before {

     border-bottom: 1px solid #eaeaea;

     transform-origin: 0 100%;

 }

 .border-left::before,

 .border-topleft::after,

 .border-rightleft::after,

 .border-bottomleft::after {

     border-left: 1px solid #eaeaea;

     transform-origin: 0 0;

 }

 .border-top::before,

 .border-topbottom::before,

 .border-topleft::before,

 .border-topright::before {

     top: 0;

 }

 .border-right::before,

 .border-rightleft::after,

 .border-rightbottom::before,

 .border-topright::after {

     right: 0;

 }

 .border-bottom::before,

 .border-topbottom::after,

 .border-rightbottom::after,

 .border-bottomleft::after {

     bottom: 0;

 }

 .border-left::before,

 .border-rightleft::before,

 .border-topleft::after,

 .border-bottomleft::before {

     left: 0;

 }

 @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {

     /* 默认值，无需重置 */

 }

 @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {

     .border::before {

         width: 200%;

         height: 200%;

         transform: scale(.5);

     }

     .border-top::before,

     .border-bottom::before,

     .border-topbottom::before,

     .border-topbottom::after,

     .border-topleft::before,

     .border-rightbottom::after,

     .border-topright::before,

     .border-bottomleft::before {

         transform: scaleY(.5);

     }

     .border-right::before,

     .border-left::before,

     .border-rightleft::before,

     .border-rightleft::after,

     .border-topleft::after,

     .border-rightbottom::before,

     .border-topright::after,

     .border-bottomleft::after {

         transform: scaleX(.5);

     }

 }

 @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {

     .border::before {

         width: 300%;

         height: 300%;

         transform: scale(.33333);

     }

     .border-top::before,

     .border-bottom::before,

     .border-topbottom::before,

     .border-topbottom::after,

     .border-topleft::before,

     .border-rightbottom::after,

     .border-topright::before,

     .border-bottomleft::before {

         transform: scaleY(.33333);

     }

     .border-right::before,

     .border-left::before,

     .border-rightleft::before,

     .border-rightleft::after,

     .border-topleft::after,

     .border-rightbottom::before,

     .border-topright::after,

     .border-bottomleft::after {

         transform: scaleX(.33333);

     }

 }
